import React from 'react'
import { Outlet,Link,NavLink } from 'react-router-dom'
import "./css/index.css"

export default function Home() {
  return (
    <div id='Home'>
      <h1>HOME</h1>
      <div>
        <Link to="/home/game">
          <button>游戏列表</button>
        </Link>
        <Link to="/home/news">
          <button>新闻列表</button>
        </Link>
        <Link to="/home/music">
          <button>音乐列表</button>
        </Link>
      </div>
      <div>
        <NavLink to="/home/game" activeclassname="active">
          <button>游戏列表</button>
        </NavLink>
        <NavLink to="/home/news" activeclassname="active">
          <button>新闻列表</button>
        </NavLink>
        <NavLink to="/home/music" activeclassname="active">
          <button>音乐列表</button>
        </NavLink>
      </div>
      {/* 在某个路由组件中，使用Outlet组件进行占位，方便将来展示子路由 */}
      <Outlet />
    </div>
  )
}